/**
 * 广告卡片组件 - leo
 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
  StyleSheet, Text, View, Image, Dimensions
} from 'react-native';

export default class AdCard extends Component {
  static propTypes = {
    images: PropTypes.string.isRequired,
    endTime: PropTypes.string.isRequired,
    status: PropTypes.string.isRequired
  };

  render() {
    const { images, endTime, status } = this.props;
    return (
      <View style={styles.container}>
        <View style={styles.cardWoucherList}>
          <View style={styles.welcomeView}>
            <Image resizeMode="cover" source={{ uri: images }} style={styles.adimages} />
          </View>
          <View style={styles.titleWrap}>
            <View style={styles.titleRow}>
              <Text style={styles.title}>有效期至：{endTime}</Text>
            </View>
            <View style={styles.titleRow}>
              <Text style={styles.price}>
                {status}
              </Text>
            </View>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row'
  },
  cardWoucherList: {
    flex: 1
  },
  welcomeView: {
    height: 136,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#045187'
  },
  welcome: {
    color: '#fff',
    fontSize: 60
  },
  adimages: {
    width: Dimensions.get('window').width,
    height: 136,
  },
  titleWrap: {
    backgroundColor: '#ebebeb',
    justifyContent: 'space-between',
    flexDirection: 'row'
  },
  titleRow: {
    padding: 5
  },
  title: {
    color: '#6a6a6a'
  },
  price: {
    color: '#6a6a6a',
    textAlign: 'right'
  }
});
